<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
		<style>
			#search{
				padding-left: 5px;
				margin: 0 auto;
				border: 2px solid red;
				border-radius: 10px;
				height: 30px;
				width: 60%;
				font-size: 18px;
			}
			.top{
				position: fixed;
				left:200px;
				top: 5px;
			}
		</style>
		<script>
			var heightAdv=0;
			var offsetLeft=0;
			window.onload=function(){
				heightAdv=document.getElementById("search").offsetTop;
				//console.log(heightAdv);
				offsetLeft=document.getElementById("search").offsetLeft;
				//alert(offsetLeft);
			}
			//原生
			window.onscroll=function(){
				var sTop=document.documentElement.scrollTop||document.body.scrollTop;
				if(heightAdv<sTop){
					var s=document.getElementById("search");
					s.style.position="fixed";
					s.style.top="5px";
					s.style.left=offsetLeft+"px";
					//document.getElementById("search").className="top";
				}else{
					document.getElementById("search").style.position="static";
				}
			}
		</script>
	</head>
	<body>
		<div id="nav" style="height: 120px;background-color: blueviolet;"></div>
		<div id="search">
			<form>
				<input type="search" name="wd">
				<input type="submit" value="search"/>
			</form>
		</div>
		<div id="main" style="height: 5000px;"></div>
	</body>
</html>
